<script>
import { Field, Picker, Popup, Toast } from 'vant';
import copy from 'copy-to-clipboard';
import { api } from '@/api';

export default {
  components: {
    Field,
    Picker,
    Popup
},
  computed: {
  },
  data() {
    return {
      info: {},
      coinType: { text: 'USDT-TRC20', value: 'USDT-TRC20' },
      showPicker: false,
      columns: [
        { text: 'USDT-TRC20', value: 'USDT-TRC20' }
      ]
    }
  },
  async created() {
    const loading = Toast.loading({ message: '加载中...', overlay: true })
    const { data } = await api.coinAccountInfo()
    loading.clear()
    this.info = data
  },
  methods: {
    onConfirm(selected) {
      this.coinType = {...selected}
      this.showPicker = false
    },
    copyAddress() {
      if (copy(this.info?.charge_addr)) {
        Toast.success({ message: '复制成功' })
      }
    }
  },
}
</script>

<template>
  <div class="add-coin">
    <Field
      :value="coinType.text"
      is-link
      readonly
      label="充币网络"
      placeholder="选择充币网络"
      @click="showPicker = true"
    />
    <Field
      :value="info?.charge_addr"
      readonly
      label="充币地址"
      @click="copyAddress"
    >
      <template #right-icon>
        <div class="copy-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
            <path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"/>
            <path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"/>
          </svg>
        </div>
      </template>
    </Field>
    
    <Popup v-model="showPicker" round position="bottom">
      <Picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </Popup>
    <!-- 二维码图片 占位图片 -->
    <img class="add-coin-qr" :src="info?.file_url ?? undefined" alt="">

    <div class="add-coin-tips">
      <div class="add-coin-tips-title">注意：</div>
      <div class="add-coin-tips-text">最小充币金额：10USDT</div>
      <div class="add-coin-tips-text">请确保充币网络为USDT-TRC20</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.add-coin {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 100%;
  
  .add-coin-qr {
    width: 240px;
    height: 240px;
    margin: 40px auto 10px;
  }

  .copy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    
    svg {
      width: 20px;
      height: 20px;
    }
  }

  .add-coin-tips {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    // flex: 1;
    padding: 20px;
    // 浅红色
    color: #f56c6c;
    .add-coin-tips-title {
      font-size: 14px;
      font-weight: bold;
    }
    .add-coin-tips-text {
      font-size: 13px;
      margin-top: 10px;
    }
  }
}
</style>
